<template>
    <div>
        <p class="p-title">{{title}}</p>
        <div class="charts">
            <div :id="id" style="min-height: 350px"></div>
        </div>
    </div>
</template>
<script>
 let echarts = require('echarts/lib/echarts');
 // 引入柱状图
 require('echarts/lib/chart/bar');
 require('echarts/lib/component/tooltip');
 require('echarts/lib/component/title');
 
 // import echarts from 'echarts'
 
 export default {
    name: "bargraph",
    //props:['bardata'], // 第一种接收父亲传过来的值的方式
    props: {
        id: {
            type: String,
            default: 'chart'
        },
        bardata:{
            type: Array
        }
    },
  data(){
   return {
        title:"上周订金额" ,
        chart: null,
        temparray : this.bardata
    }
  },
  watch: {
    bardata: {
    　　　　handler(newV, oldV) {
               this.drawBar();
    　　　　},
    　　　　deep: true
    　　}
},
  mounted(){
    this.drawBar();
  },
  methods:{
  drawBar(){ 
   this.chart = echarts.init(document.getElementById(this.id));
   let colors = ['#5793f3', '#d14a61', '#675bba'];
   this.chart.setOption(
   {
        color: colors,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
         },
        grid: {
            right: '20%'
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data:['未付款','已付款']
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期七']
            }
        ],
         yAxis: [
            {
                type: 'value',
                position: 'left',
                min: 0,
                max: 500,
                axisLine: {
                    lineStyle: {
                        color: colors[2]
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                }
            },
             {
                type: 'value',
                position: 'left',
                min: 0,
                max: 500,
                axisLine: {
                    lineStyle: {
                        color: colors[2]
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
    series: [
        {
            name:'已付款',
            type:'line',
            data:[10,200,15,150,20,1,800]
        },
        {
            name:'未付款',
            type:'line',
            yAxisIndex: 1,
            data:this.bardata
        }
      ]
    }
   )
  }
  }
 }
</script>
<style lang="less" scoped>
    .p-title{
        margin: 10px 0;
        height: 40px;
        line-height: 30px;
        font-weight: 700;
        background: #fff;
        font-size: 14px;
        border-bottom: 1px solid #eee;
    }
</style>